/**
 * 组件代码
 */
Vue.component('comSougnPie', {
    name: 'comSougnPie',
    props: ['config', 'data'],
    data: function () {
        return {
            myChart: {},
            option: {
                title: {
                    text: '某站点用户访问来源',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ]
                    }
                ]
            }
        }
    },
    mounted: function () {
        var that = this;
        this.myChart = echarts.init(this.$el);
        // 指定图表的配置项和数据
        this.myChart.setOption(this.getData());
        this.myChart.on('click', function (params) {
            // 在用户点击后控制台打印数据的名称
            var data = [];
            data.push(params.name);
            data.push(params.seriesName);
            data.push(params.value);
            if (that.myConfig.output.trim() == "") {
                return;
            } else {
                setValue(that.myConfig.output, data);
            }
        });
        var that = this;
        setTimeout(function () {
            that.myChart.resize() // 当元素尺寸发生改变是会触发此事件，刷新图表
        }, 100)
    },
    methods: {
        getData() {
            var options = Object.assign({}, this.option);
            var title = window.getValue(this.myConfig.title);
            var pie = window.getValue(this.myConfig.pie).reduce(function (a, b) {
                return a.concat(b)
            });
            var dataAll = window.getValue(this.myConfig.data).reduce(function (a, b) {
                return a.concat(b)
            });
            var color = window.getValue(this.myConfig.color).reduce(function (a, b) {
                return a.concat(b)
            });
            var newData = []
            for (var i in pie) {
                newData.push({
                        value: dataAll[i],
                        name: pie[i]
                    }
                )
            }
            var data = {
                color:color,
                title: {
                    text: title
                },
                series: [{
                    type: 'pie',
                    data: newData,
                    radius: [this.myConfig.ny+"%",this.myConfig.wy+"%"],
                }]
            }
            Object.assign(options, data)
            return options;
        }
    },
    computed: {
        myConfig: function () {
            var data = {};
            for (var item of this.config) {
                data[item.id] = item.value;
            }
            return data;
        },
    },
    watch: {
        data: function (oldValue, newValue) {
            var that = this;
            this.myChart.setOption(this.getData());
            setTimeout(function () {
                that.myChart.resize() // 当元素尺寸发生改变是会触发此事件，刷新图表
            }, 100)
        }
    },
    template: `<div :style="myConfig" style="width: 100%;height: 100%;"></div>`,
});
/**
 * 配置项
 * @type {{name: string, id: string, type: string, value: string}[]}
 */
var comSougnPieConfig = [{
    name: "标题",
    type: "data",
    value: "",
    id: "title"
}, {
    name: "饼图标题",
    type: "data",
    value: "",
    id: "pie"
}, {
    name: "数据",
    type: "data",
    value: "",
    id: "data"
}, {
    name: "颜色",
    type: "data",
    value: "",
    id: "color"
}, {
    name: "内圆半径",
    type: "size",
    value: 0,
    id: "ny"
}, {
    name: "外圆半径",
    type: "size",
    value: 100,
    id: "wy"
}, {
    name: "点击输出",
    type: "data",
    value: "",
    id: "output"
}]
